<template>
	<view class="outer_box" :style="{height:height+'px'}">
		<scroll-view scroll-y="true">
			<view class="person-box">
				<view class="person-card" v-for='(item,index) in relationList'>
					<view class="person">
						<view class="name">
							<view class="">
								{{item.name}}
							</view>
							<view class="">
								<text v-if="item.relation==1">父亲</text>
								<text v-if="item.relation==2">母亲</text>
								<text v-if="item.relation==3">岳父</text>
								<text v-if="item.relation==4">岳母</text>
								<text> {{item.age}}岁</text>
							</view>
						</view>
						<view class="phone">
							<view class="">{{item.phone}}</view>
							<view class="">添加时间：{{item.createTime | dateFormatYear}}</view>
						</view>
						<image @tap="deleteuserrelation(item.id)" class="person-card-img" src="../../static/lipdee/sc@2x.png" mode=""></image>
					</view>
				</view>

			</view>
		</scroll-view>
		<view class="add-btn-box">
			<view class="add-btn" @tap='openFamilyBind'>
				添加家庭成员
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 500,
				relationList: '',
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(0)
				}
			})
		},
		onShow() {
			this.getuserrelationList()
		},
		methods: {
			//解绑家人
			deleteuserrelation(id){
				uni.showModal({
				    title: '提示',
				    content: '是否解除绑定本记录？',
				    success: (res)=> {
				        if (res.confirm) {
				            this.del(id)
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			del(id){
				this.$api_http.deleteuserrelation({
					id:id
				}).then((res) => {
					if(res.data.success){
						uni.showToast({
							title: "解绑成功",
							duration: 1000,
						});
						this.getuserrelationList()
					}
							
				})
			},
			//获取家人列表
			getuserrelationList() {
				this.$api_http.getuserrelationList().then((res) => {
					if(res.data.code = 200){
						console.log(res.data.dataMap)
						this.relationList = res.data.dataMap
					}
			
				})
			
			},
			openFamilyBind(){
				uni.navigateTo({
					url:'familyBind'
				})
			}


		}
	}
</script>

<style lang="less" scoped>
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	.outer_box {
		height: 100%;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;

		.add-btn-box {
			display: flex;
			justify-content: center;

			.add-btn {
				width: 78%;
				height: 100upx;
				background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
				border-radius: 50upx;
				color: #FEFEFE;
				font-size: 32upx;
				line-height: 100upx;
				text-align: center;
				margin: 20rpx 0;
			}

		}

		.person-box {
			padding: 20rpx;

			.person-card {
				display: flex;
				width: 100%;
				background-color: #fff;
				margin-bottom: 20rpx;

				.person {
					width: 100%;
					padding: 30rpx 20rpx;
					display: flex;
					.person-card-img{
						width: 80rpx;
						height: 80rpx;
					}
					.name,
					.phone {
						flex: 1;

						view:nth-child(1) {
							color: #333333;
							font-weight: bold;
						}

						view:nth-child(2) {
							margin-top: 20rpx;
							color: #999999;
							font-size: 24rpx;
						}
					}

					.phone {
						text-align: center;
					}
				}

			}
		}
	}
</style>
